<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css垂直居中方案</title>
  </head>
  <style type="text/css">
    /* 
  第一种：position:absolute;transform:(0,-50%);
  tips：存在css3兼容问题，定宽兼容性良好
   */
    /* .parent {
      height: 500px;
      width: 100px;
      background-color: #ccc;
      position: relative;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
    } */


    /* 
    第二种：display:flex;align-items:center;
    tips：存在css3兼容问题，定宽兼容性良好
    justify-items: center; 控制子内容居中
    align-items:控制子内容垂直居中 
    */
    /* .parent {
      height: 500px;
      width: 100px;
      background-color: #ccc;
      display: flex;
      align-items: center;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: red;
    } */

    /* 
    第三种：tips：可替换成<table />布局，兼容性良好
    display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。
    vertical-align:center;对行内元素居中。
    原来vertical-align属性只对行内元素有效，对块内元素无效！
    */

    .parent {
      height: 500px;
      width: 100px;
      background-color: #ccc;
      display: table-cell;
      vertical-align: middle;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>

  <body>
    <div class='parent'>
      <div class='son'></div>
    </div>
  </body>

</html>